// 最外层包裹元素
#wrapper {

  // 头部
  #header {

    // 上边登陆部分
    .headTop {
      height: 30px;
      background-color: #eaeaea;
      
      // 版心元素
      .headTopMain {
        width: 1200px;
        height: 30px;
        margin: 0 auto;

        // 左侧部分 
        .left {
          float: left;
          h5 {
            display: inline-block;
            line-height: 30px;
          }
          span {
            a {
              padding: 0 5px 0 2px;
            }
            :first-child {
              border-right: 1px solid #b3aeae;
            }
          }
        }
        // 右侧部分
        .right {
          float: right; 
          ul {
            li {
              display: inline-block;
              line-height: 30px;
              a {
                padding: 0 9px;
                border-right: 1px solid #b3aeae;
              }
            }
            :last-child {
              a {
                padding: 0 0 0 6px;
                border-right:none;
              }
            }
          }
        }
      }
    }

    // input搜索框
    .headBottom {

      // 设置版心
      .headBottomMain {
        width: 1200px;
        margin: 0 auto;
        background-color: pink;

        // 设置值logo 
        .logo {
          float: left;
          height: 56px;
          width: 175px;
          margin: 25px  45px;
        }

        // 设置搜索框
        .search {
          float: right; 
          margin-top: 40px;
          input {
            box-sizing: border-box;
            padding:0px 4px;
            height: 32px;
            width: 490px;
            float: left;
            border: 3px solid #ea4a36; 
          }
          :last-child {
            width: 68px;
            height: 32px;
            background-color: #ea4a36;
            color: #fff;
          }
        }
      }
    }
  }

  // 分类导航
  #navWrap {
    border-bottom: 2px solid #e1251b;
    width: 100%;
    float: left;

    // 版心
    .navWrapMain {
      width: 1200px;
      margin: 0 auto;
      
      // 设置第一个a标签
      :first-child {
        display: inline-block;
        height: 50px;
        width: 210px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        background-color: #e1251b;
        line-height: 50px;
        text-align: center;
        margin-left: 22px;
      }

      // 设置其余a标签
      a {
        float: left;
        display: inline-block;
        margin: 0 22px;
        font-size: 16px;
        color: #333;
        line-height: 50px;
      }
    }
  }

  // 设置内容区域
  #content {
    width: 100%;
    float: left;

    // 版心元素
    .contentMain {
      width: 1200px;
      margin: 15px auto 0 auto;

      // 路径导航
      #navPath {
        padding: 9px 15px 9px 0;
        font-size: 0;
        a {
          font-size: 12px;
        }
        i {
          padding: 0 5px;
          font-size: 12px;
        }
      }

      // 中间区域
      .center {
        margin: 5px 0 15px;
        clear:both;
        // 左侧放大镜部分
        .left {
          width: 400px;
          float: left;

          // 上边图片部分
          .leftTop {
            width: 400px;
            position: relative;

            // 小图框
            .smallPic {
              width: 400px;
              height: 400px;
              border: 1px solid #DFDFDF;
              // 蒙版
              .mask {
                display: none;
                left: 0;
                top: 0;
                position: absolute;
                width: 200px;
                height: 200px;
                // background-color: pink;
                background: rgba(255,255,255,.5);
                border: 1px solid #ddd;
              }
            }

            // 大图框
            .bigPic {
              display: none;
              width: 400px;
              height: 400px;
              border: 1px solid #ddd;

              // 有上下左右的位置信息，所以需要使用定位，子绝父相
              left: 420px;
              top: 0;
              position: absolute;
              overflow: hidden;
              img {
                height: 800px;
                width: 800px;
                // 设置绝对定位，因为在JS中修改了他的上下位置
                position: absolute;
                left: 0;
                top: 0;
              }
            }
          }

          // 下边缩略图
          .leftBottom {
            width: 400px;
            margin-top: 5px;
            background-color: pink;
            a {
              float: left;
              display: block;
              width: 10px;
              height: 54px;
              background-color: #EBEBEB;
              border: 1px solid #ccc;
              // 水平方向剧中
              text-align: center;
              // 垂直方向剧中
              line-height: 54px;
            }
            :first-child {
              margin-right: 4px;
            }

            .picList {
              // 子绝父相
              position: relative;
              float: left;
              width: 372px;
              height: 56px;
              overflow: hidden;

              ul {
                // 强制不换行
                white-space: nowrap;
                font-size: 0;
                // 绝对定位
                position: absolute;
                left: 0;
                transition: .5s;

                li {
                  width: 50px;
                  height: 50px;
                  border: 1px solid #ccc;
                  padding: 2px;
                  margin-right: 20px;
                  display: inline-block;

                  img {
                      width: 50px;
                      height: 50px;
                  }
                }
              }
            }
          }
        }
        
        // 右侧详情页
        .right {
          float: right;
          width: 700px;

          // 上半部分
          .rightTop {
            // 标题
            h3 {
              font-size: 14px;
              line-height: 21px;
              margin-top: 15px;
            }
          
            // 简介
            >p {
              margin-top: 15px;
              color: #e12228;
            }
          
            // 价格快
            .priceWrap {
              margin-top: 10px;
              line-height: 28px;
              // background-color: #fee9ec;
              padding: 7px;

              // 价格
              .priceTop {
                clear:both;
                // 标题
                >span {
                  margin-right: 15px;
                  float: left;
                }
                .price {
                  float: left;
                  color: #cc1122;
                  >span {
                    float: left;
                    font-size: 16px;
                  }
                  >p { 
                    float: left;
                    font-size: 24px;
                    font-weight: bold;
                  }
                  >i {
                    float: left;
                    font-size: 12px;
                  }
                }
                // 累计评价
                >p {
                  float: right;
                }
              }
              // 促销
              .priceBottom {   
                clear:both;         
                >span {
                  float: left;
                  margin-right: 15px; 
                }
                >p {
                  width: 520px;
                  line-height: 28px;
                  float: left;
                  >span {
                    color: #999;
                    // 加价购
                    &:first-child{
                      background-color: #c81623;
                      padding: 3px;
                      color: #fff;
                    }
                  }
                }
              }
            }
            // 支持
            .support {
              width: 700px;
              clear:both;
              float: left;
              border-bottom: 1px solid #ededed;
              padding-bottom: 5px;
              margin-top: 17px;
              line-height: 28px;
              >span {
                float: left;
                margin-right: 15px;
              }
              >p {
                float: left;
                color: #999;
              }
              // 配送至
              .address {
                clear:both;
                float: left;
                margin-top: 10px;
                >span {
                  float: left;
                  margin-right: 15px;
                }
                >p {
                  float: left;
                  color: #999;
                }
              }
            }
          }

          // 下半部分
          .rightBottom {
            margin-top: 10px;
            line-height: 28px;

            // 选择之后的面包屑
            .choose {
              margin-top: 10px;
              float: left;
              .mark {
                float: left;
                height: 30px;
                background: snow;
                border: 1px solid #ddd;
                padding: 0 20px;
                margin-right: 20px;
                text-align: center;
                line-height: 30px;

                a {
                  color: red;
                  margin-left: 20px;
                }
              }
            }

            // 商品的参数选择区域
            .chooseWrap {

              dl {
                float: left;
                margin-top: 13px;  
                // 清除浮动效果
                clear: both;
                dt {
                  float: left;
                  margin-right: 15px;
                }
                dd {
                  float: left;
                  display: block;
                  margin-right: 5px;
                  color: #666;
                  line-height: 24px;
                  padding: 2px 14px;
                  border: 1px solid;
                  border-color: #eee  #bbbb #bbb #eee;
                  // 设置第一个元素属性值
                  &:first-of-type {
                    color: red;
                  }
                }
              }          
            }

            // 加入购物车
            .addCart {
              float: left;
              clear: both;
              margin-top: 13px;

              .count {
                float: left;
                position: relative;
                width: 75px;
                margin-right: 15px;
                
                input {
                  width: 38px;
                  height: 37px;
                  color: #555;
                  border: 1px solid #ddd;
                  padding: 0 10px;
                }

                a {
                  width: 15px;
                  height: 18px;
                  color:#666;
                  background: #f1f1f1;
                  position: absolute;
                  right:1px;
                  text-align: center;
                  line-height: 18px;
                  border:1px solid #ddd;
                  &:first-child{
                      top:0px;
                  }

                  &:last-child{
                      top:20px;
                      border-top: none;
                  }
                }
              }

              button {
                padding-left: 25px;
                padding-right: 25px;
                height: 36px;
                font-size: 16px;
                background: #e1251b;
                color:#fff;
                border:none;
                float: left;
              }
            }
          }
        }
      } 
    }

    // 商品详情中间
    .goodsDetailWrap {
      clear: both;
      float: left;
      width: 1200px;
      margin: 30px auto 0;

      // 左侧侧边栏部分
      .leftAside {
        float: left;
        width: 210px;
        border: 1px solid #ccc;

        // 上边选项卡部分
        .asideTop {
          // 清除浮动
          clear: both;
          h4 {
            width: 105px;
            height: 40px;
            background: #fff;
            float: left;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            border-top: 3px solid #fff;

            &.active {
              border-top: 3px solid #e1251b;
              width: 105px;
              line-height: 37px;
              text-align: center;
              line-height: 40px;
              border-bottom:none;
            }
          }
        }
        // 下边内容区域
        .asideBottom {
          padding: 10px;
          div{
            display: none;
            &.active{
              display: block;
              ul{
                &.goodslist1{
                  li{
                    width: 50%;
                    border-bottom:1px dashed #ededed;
                    line-height: 28px;
                    float: left;
                  }
                }
                &.goodslist2{
                  margin: 5px 0 15px;
                  li{
                    border-bottom:1px solid #ededed;
                    img{
                      width: 152px;
                    }
                    span{}
                    p{
                      font-size: 16px;
                      color:#c81623;
                    }
                    .button{
                      margin-top: 5px;
                      margin-bottom: 5px;
                      text-align: center;
                      
                      a{
                        color:#8c8c8c;
                        padding: 2px 14px;
                        line-height: 18px;
                        border:1px solid #8c8c8c;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      // 右侧部分
      .rightDetail {
        width: 980px;
        float: right;

        // 选择搭配开始
        .chooseBox {
          border: 1px solid #ddd;
          // 标题
          h4 {
            border-bottom: 1px solid #ddd;
            background-color: #f1f1f1;
            color: #333;
            padding: 5px 0 5px 15px;
          }
          // 内容
          .listWrap {
            height: 170px;
            padding-top: 10px;


            // 左边
            .left {
              width: 127px;
              height: 165px;
              position: relative;
              float: left;
              text-align: center;

              img {
                width: 87px;
                margin: 0 auto;
              }
              p {
                color: #c81623;
                font-size: 16px;
              }
              i {
                position: absolute;
                top: 48px;
                right: -25px;
                font-size: 16px;
              }
            }
            // 中间
            .middle {
              width: 668px;
              height: 165px;
              float: left;
              text-align: center;

              li {
                float: left;
                height: 127px;
                margin: 0 23px;

                img {
                  width: 120px;
                  height: 130px;  
                }
              }
            }
            // 右侧
            .right {
              border-left:1px solid #ddd;
              float: left;
              width: 153px;
              height: 165px;
              padding-left: 20px;
              div{
                margin-top: 10px;
                margin-bottom: 10px;
              }
              p{
                font-weight: bold;
                margin-bottom: 10px;
              }
              i{
                color:#b1191a;
                font-size: 16px;
                margin-bottom: 10px;
              }
              button{
                padding: 10px 25px;
                font-size: 16px;
                color:#fff;
                background: #e1251b;
                border: none;
              }
            }
          }
        }

        // 选项卡
        .BottomDetail {
          // 菜单
          .tabBtns {
            background: #ededed;
            float: left;
            margin-top: 5px;
            margin-bottom: 10px;
            width: 980px;

            li {
              border-top:1px solid #ddd;
              border-bottom:1px solid #ddd;
              background: #fff;
              border-left:1px solid #ddd;
              height: 40px;
              padding-left: 11px;
              padding-right: 11px;
              float: left;
              text-align: center;
              line-height: 40px;
              &.active{
                background: red;
                a{
                  color:#fff;
                }
              }
              &:last-child{
                border-right:1px solid #ddd;
              }
            }
          }

          // 内容
          .tabContents{
            div{
              padding-left: 20px;
              line-height: 25px;
              display: none;
              &.active{
                margin: 10px 0;
                display: block;
              }
            }
          }
        }
      }
    }
  }
}